<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			body{
				text-align: center;
				
			}
			.box{
				height: 150px;
				width:150px;
				background-color: red;
				margin: auto;
			}
			.box:hover {
				background-color: yellow;
				
			}
			.box:active { 
				background-color: blue;
			}
			/* ----------------------------------------- */
			/*     设置超链接被鼠标悬停时的状态    */
			.a1:hover{
				color: red;
			}
			/*     设置超链接被激活过的状态    */
			.a1:active{
				color:green;
			}
			/*     设置超链接未被访问过的状态         */
			a:link{
				color: blue;
			}
			/*      设置超链接被访问过后的状态      */
			a:visited{
				color: blue;
			}
			/* ----------------------------------- */
			.h3_test{
				 text-shadow: 5px 5px 10px black;
			}
			.h3_test:hover{
				color: red;
			}
			/* ----------------------------------- */
			input:focus{
				background-color: #efefef;
			}
			
			
			
		</style>
	</head>
	<body>
		
		<div class="box"></div>
		
		<hr>
		<a href="http://www.baidu.com" class="a1">网站名1</a>
		<a href="#" class="a1">网站名2</a>
		<a href="#a" class="a1">网站名2</a>
		<hr>
		<h3 class="h3_test">这是一个测试阴影的地方</h3>
		<hr>
		用户名:<input type="text"  />
		<span>请验证自己的用户名是否正确</span>
		
		
	</body>
</html>